<template>
	<view class="chat">
		<!-- :style="{'padding-bottom':!judeg?'400upx':'200upx'}" -->
		<view ref="box" class="box" @click="judeg = true" >
			<view v-for="(item,index) in messageList" :key="index">
				<view class="left" v-if="item.senderUserId == toUserId">
					<view v-if="item.content.type && item.content.type == 'imgMsg'">
						<image class="tx" mode="aspectFill" :src="item.content.senduser && item.content.senduser.portraitUri || '../../static/img/gls1.png'" @click="toUserInfo(item)"/>
						<image mode="widthFix" :src="item.content.content" alt="" @click="previewImage(item)"/>
					</view>
					<view v-else-if="item.content.type && item.content.type == 'vioceMsg'">
						<image class="tx" mode="aspectFill" :src="item.content.senduser && item.content.senduser.portraitUri || '../../static/img/gls1.png'"   @click="toUserInfo(item)" />
						<text class="message" @click="playVoice(item,index)"  :style="{width: Math.floor(item.content.time/100*460)+'px'}">{{ Math.floor(item.content.time)}}s<image class="voice-icon" v-if="!item.play" mode="widthFix" src="../../static/img/voice_play_stop.png"><image class="voice-icon"  mode="widthFix" src="../../static/img/voice_play.gif"></text>
					</view>
					<view v-else>
						<image class="tx"  mode="aspectFill" :src="item.content.senduser && item.content.senduser.portraitUri || '../../static/img/gls1.png'" @click="toUserInfo(item)"></image>
						<text class="message">{{item.content.content}}</text>
					</view>
				</view>
				<view class="right" v-else>
					<view v-if="item.content && item.content.type == 'imgMsg'">
						<image class="tx" mode="aspectFill" :src="item.content.senduser && item.content.senduser.portraitUri || '../../static/img/gls1.png'" @click="toUserInfo(item)"></image>
						<image mode="widthFix" :src="item.content.content" alt="" @click="previewImage(item)"/>
						<!-- <text class="status">{{item.expansion && item.expansion.isRead && item.expansion.isRead?'已读':'未读'}}</text> -->
					</view>
					<view v-else-if="item.content.type && item.content.type == 'vioceMsg'">
						<image class="tx" mode="aspectFill" :src="item.content.senduser && item.content.senduser.portraitUri || '../../static/img/gls1.png'" @click="toUserInfo(item)"/>
						<text class="message" @click="playVoice(item,index)" :style="{width: Math.floor(item.content.time/100*460)+'px'}">{{ Math.floor(item.content.time)}}s<image class="voice-icon" v-if="!item.play" mode="widthFix" src="../../static/img/voice_play_stop.png"></image><image class="voice-icon" v-else mode="widthFix" src="../../static/img/voice_play.gif"></text>
						<!-- <text class="status">{{item.expansion && item.expansion.isRead && item.expansion.isRead?'已读':'未读'}}</text> -->
					</view>
					<view v-else>
						<image  class="tx"  mode="aspectFill" :src="item.content.senduser && item.content.senduser.portraitUri || '../../static/img/gls1.png'" @click="toUserInfo(item)"></image>
						<text class="message">{{item.content.content}}</text>
						<!-- <text class="status">{{item.expansion && item.expansion.isRead && item.expansion.isRead?'已读':'未读'}}</text> -->
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="content">
				<image src="../../static/img/member/keyboard@2x.png" @click="voiceStatus = !voiceStatus"></image>
				<textarea type="text" maxlength="800" :auto-height="wordWrap" v-model="message" @linechange="inputContent" @input="onInput" v-show="!voiceStatus"></textarea>
				<view v-if="voiceStatus" @touchmove="handletouchmove" @touchstart="handletouchstart" @touchend="handletouchend"  :class="['voiceBtn',isTouch?'on':'']" >按住说话</view>  
				<image src="../../static/img/member/add@2x.png" @click="showMoreOperation().then(()=>{scrollBottom()})"></image>
				<text v-if="messageNone" @click="sendmessageBtn">发送</text>
			</view>
			<view class="function" v-if="!judeg">
				<image src="../../static/img/member/photoAlbum@2x.png" @click="chooseImg"></image>
				<image src="../../static/img/member/shoot@2x.png" @click="cameraImg"></image>
				<image src="../../static/img/member/voiceCommunication@2x.png" @click="tips"></image>
				<image src="../../static/img/member/vedioCall@2x.png" @click="tips"></image>
			</view>
		</view>
		<view class="voice-loading" v-if="showVioceLoading">
			<image src="../../static/img/voice.gif" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	document.addEventListener("mousedown", function(e){
	  if(e.target.tagName!=="TEXTAREA"){
		e.preventDefault()
	  }
	}, false);
	const RongIMLib = require('@/static/js/IMSDK/RongIMLib-3.0.7-dev');
	import {getUrlParam} from '@/static/js/filter.js'
	import { pathToBase64, base64ToPath } from '@/js_sdk/gsq-image-tools/image-tools/index.js'
	import wx from '@/static/js/wx-jssdk/index.js'
	var timeOutEvent = 0 ;//定时器  
	export default {
		data() {
			return {
				voiceStatus:false,
				judeg: true,
				messageNone: false,
				wordWrap: true,
				messageList:[],
				toUserId:getUrlParam('toUserId'),
				message:'',
				timeOutEvent:0,
				showVioceLoading:false,
				isTouch:false,
				images: [],
				localIds:''
			}
		},
		onLoad(option){
			setTimeout(()=>{
				const _this = this;
				_this.$wx.initJssdk()
				uni.setNavigationBarTitle({
					title:decodeURI(getUrlParam('name'))
				})
				_this.$im.watch({
					conversation: function(event){
						var updatedConversationList = event.updatedConversationList;
					},
					message: function(event){
						var message = event.message;
						if(!message.content.content){
							// 已读通知return
							return;
						}
						if(message.content.imageUri) {
							_this.images.push(message.content.imageUri);
						}
						if(message.senderUserId != getUrlParam('toUserId')){
							// 不是当前用户的消息return
							return;
						}
						if(_this.$route.path == '/pages/imchat/chat'){
							console.log('收到新消息:', message);
							var conversation = _this.$im.Conversation.get({
							  targetId: getUrlParam("toUserId"),
							  type: RongIMLib.CONVERSATION_TYPE.PRIVATE
							});
							conversation.read().then(function(){
							  console.log('清除未读数成功'); // im.watch conversation 将被触发
							});
							
							if(message.messageType == 'RC:ReadNtf'){
								// 用于改变未读状态
								const item = _this.messageList.filter((a)=>{
									return a.messageUId == message.content.messageUId
								})
								if(item.length <= 0){
									return false;
								}
								_this.ImupdateMessageExpansion(item)
								return;
							}
						}
						if(message.content.mid){
							// 发送已读通知 不加入聊天记录列表
							return;
						}
						_this.messageList.push(message)
						// _this.scrollBottom()
					},
					status: function(event){
						var status = event.status;
					}
				})
				
				_this.$api.findByHealthId().then((res)=>{
					if(res.data.returnCode == 200){
						_this.data = res.data.result
					}  
				})
				_this.getMessage().then(()=>{
					_this.scrollBottom()
				})
			},800)
		},
		onPullDownRefresh(){
			if(!this.messageList[0].sentTime){
				return;
			}
			this.getMessage(this.messageList[0].sentTime)
		},
		onNavigationBarButtonTap(e){
			const tPic = decodeURI(getUrlParam('headPicture'))
			const tName = decodeURI(getUrlParam('name'))
			const tId = decodeURI(getUrlParam('toUserId'))
			const mPic = this.data.headPicture || 'http://jlm-file.oss-cn-hangzhou.aliyuncs.com/jlm-product/image/portrait/2020/11/9472ab92fe90400fbee424c2d6b02fb0.png'
			const mName = this.data.realName
			const mId = localStorage.IMCOEDID
			uni.navigateTo({
				url:encodeURI('/pages/imchat/addgroup?mName='+mName+'&tName='+tName+'&mPic='+mPic+'&tPic='+tPic+'&tId='+tId+'&mId='+mId)
			})
		},
		methods:{
			// 点击语音跟视频聊天提示框
			tips() {
				uni.showToast({title: '正在开发~',icon:'none'});
				return
			},
			// 预览图片
			previewImage(item){
				const findIndex = this.images.findIndex((a)=>{ return a == item.content.imageUri});
				uni.previewImage({
				   urls: this.images,
				   current:findIndex,
				   longPressActions: {
					   success: function(data) {
						   console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					   },
					   fail: function(err) {
						   console.log(err.errMsg);
					   }
				   }
			   });
			},
			// 更新消息的扩展内容
			ImupdateMessageExpansion(item){
				const _this = this;
				var conversation = _this.$im.Conversation.get({
					targetId: item[0].targetId,
					type: RongIMLib.CONVERSATION_TYPE.PRIVATE
				});
				var expansion = {
					isRead: true
				};
				var message = {
					messageUId: item[0].messageUId,
					canIncludeExpansion: true,
				};
				conversation.updateMessageExpansion(expansion, message).then(() => {
					const Index = _this.messageList.findIndex((a)=>{return a.messageUId == item[0].messageUId})
					_this.$set(_this.messageList[Index].expansion,'isRead',true)
					console.log('更新消息扩展成功');
				}).catch((error) => {
					console.log('更新消息扩展失败', error);
				});
			},
			// 播放语音
			playVoice(item,index){
				let _this = this
				let time = item.content.time
				_this.$set(_this.messageList[index],'play',true)
				_this.$wx.downloadVoice(item.content.remoteUrl,function(res){
					_this.$wx.playVoice(res.localId,function(a){
						let timeInt = setInterval(function(){
							time--
							if(time <= 0){
								clearInterval(timeInt)
								_this.$set(_this.messageList[index],'play',false)
							}
						},1000)
					}); 	
				})
			},
			handletouchstart(e) { 
				let _this = this;
				clearTimeout(timeOutEvent);//清除定时器
				timeOutEvent = 0;
				_this.isTouch = true
				_this.startTime = new Date().getTime();
				timeOutEvent = setTimeout(function(){
					try  {
						 var touch = e.touches[0];  //获取第一个触点
						 _this.startY = Number(touch.pageY);
					 }  catch  (e) {
						 console.log( 'touchSatrtFunc：'  + e.message);
					 }
					 _this.showVioceLoading = true;
					 _this.$wx.startRecord(function(res){
					 	_this.startTime = new Date().getTime();
					 	var voiceTime = 0
					 	var voiceInt = setInterval(()=>{
					 		voiceTime++
					 		// vant.Toast(voiceTime)
					 		if(voiceTime>58){
					 			_this.isTouch = false
					 			clearInterval(voiceInt);
					 			_this.showVioceLoading = false;
					 			_this.$wx.stopRecord(function(stopres){
					 				_this.$wx.uploadVoice(stopres.localId,function(uploadRes){
					 					var conversation = _this.$im.Conversation.get({
											targetId: getUrlParam("toUserId"),
											type: RongIMLib.CONVERSATION_TYPE.PRIVATE
										});
										conversation.send({
											messageType: RongIMLib.MESSAGE_TYPE.HQ_VOICE, // 'RC:HQVCMsg'
											content:{
												content: stopres.localId, 
												remoteUrl: uploadRes.serverId, 
												type: 'vioceMsg',
												time: (new Date().getTime() - _this.startTime)/1000 ,
												senduser: {
													id: localStorage.IMCOEDID,
													name: _this.data.realName,
													portraitUri: _this.data.headPicture || 'http://jlm-file.oss-cn-hangzhou.aliyuncs.com/jlm-product/image/portrait/2020/11/9472ab92fe90400fbee424c2d6b02fb0.png'
												},
												receive:{
													id:getUrlParam("toUserId"),
													name:decodeURI(getUrlParam("name")),
													portraitUri:getUrlParam("headPicture")
												},
												senderUserId:localStorage.IMCOEDID
											},
											canIncludeExpansion: true, // 是否携带扩展
											expansion: {  // 携带的扩展内容
												isRead: false
											}
										}).then(function(message){
											_this.messageList.push(message)
											console.log('发送语音消息成功', message);
										});
					 				})
					 			});
					 		}
					 	},1000)
					 });
				},600)
			},  
			handletouchend() {  
				let _this = this;
				clearTimeout(timeOutEvent);
				if (new Date().getTime() - _this.startTime < 1000) {
					uni.showToast({title:'录制时间太短',icon:'none'})
					_this.startTime = 0;
					_this.showVioceLoading = false;
					_this.isTouch = false
					return;
				} else {
					_this.showVioceLoading = false;
					_this.isTouch = false
					_this.$wx.stopRecord(function(res){
						_this.$wx.uploadVoice(res.localId,function(uploadRes){
							var conversation = _this.$im.Conversation.get({
								targetId: getUrlParam("toUserId"),
								type: RongIMLib.CONVERSATION_TYPE.PRIVATE
							});
							conversation.send({
								messageType: RongIMLib.MESSAGE_TYPE.HQ_VOICE, // 'RC:HQVCMsg'
								content:{
									content: res.localId, 
									remoteUrl: uploadRes.serverId, 
									type: 'vioceMsg',
									time: (new Date().getTime() - _this.startTime)/1000 ,
									senduser: {
										id: localStorage.IMCOEDID,
										name: _this.data.realName,
										portraitUri: _this.data.headPicture || 'http://jlm-file.oss-cn-hangzhou.aliyuncs.com/jlm-product/image/portrait/2020/11/9472ab92fe90400fbee424c2d6b02fb0.png'
									},
									receive:{
										id:getUrlParam("toUserId"),
										name:decodeURI(getUrlParam("name")),
										portraitUri:getUrlParam("headPicture")
									},
									senderUserId:localStorage.IMCOEDID
								},
								canIncludeExpansion: true, // 是否携带扩展
								expansion: {  // 携带的扩展内容
									isRead: false
								}
							}).then(function(message){
								_this.messageList.push(message)
								console.log('发送语音消息成功', message);
							});
						})
					});
				}
			},  
			handletouchmove(e) {  
				const _this = this;
				var touch = e.touches[0];  //获取第一个触点
				var movePageY = Number(touch.pageY)
				if(_this.startY - movePageY > 100){
					_this.showVioceLoading = false;
					_this.isTouch = false
					_this.$wx.stopRecord()
				}
			},  
			showMoreOperation(){
				return new Promise((resolve, reject) => {
					this.judeg = !this.judeg
				    resolve('success');
				});
			},
			// blob转base64
			blobToBase64(blob) {
			  return new Promise((resolve, reject) => {
			    const fileReader = new FileReader();
			    fileReader.onload = (e) => {
			      resolve(e.target.result);
			    };
			    // readAsDataURL
			    fileReader.readAsDataURL(blob);
			    fileReader.onerror = () => {
			      reject(new Error('blobToBase64 error'));
			    };
			  });
			},
			// 选择图片发送
			chooseImg(){
				const _this = this;
				_this.$wx.chooseImage(function(res){
					res.localIds && res.localIds.map((ares)=>{
						_this.$wx.uploadImage(ares,function(bres){
							_this.$api.getImage(bres.serverId).then((cres)=>{
								_this.sendImgmessage(cres.data.result.url).then(data=>{
									if(data){
										_this.judeg = true;
										_this.scrollBottom()
									}
								})
							})
						})
					})
				})
			},
			// 相机
			cameraImg(){
				const _this = this;
				uni.chooseImage({
				    count: 1, //默认9
				    sourceType: ['camera'], //相机
				    success: function (res) {
						res.tempFilePaths.map((a)=>{
							pathToBase64(a)
							.then(path => {
								var file = _this.dataURLtoFile(path, 'file.png');
								_this.$api.uploadImg({file:file,type:12}).then((response)=>{
									if(response.returnCode == 200){
										_this.sendImgmessage(response.result.url).then(data=>{
											if(data){
												_this.judeg = true;
												_this.scrollBottom()
											}
										})
									}
								})
							})
							.catch(error => {
								console.error(error)
							})
						})
				    }
				});
			},
			dataURLtoFile(dataurl, filename) {
				var arr = dataurl.split(','),
					mime = arr[0].match(/:(.*?);/)[1],
					bstr = atob(arr[1]),
					n = bstr.length,
					u8arr = new Uint8Array(n);
				while (n--) {
					u8arr[n] = bstr.charCodeAt(n);
				}
				return new File([u8arr], filename, { type: mime });
			},
			// 发送图片消息
			sendImgmessage(Url){
				const _this = this;
				var promise = new Promise(function(resolve,reject){
					var conversation = _this.$im.Conversation.get({
					  targetId: getUrlParam("toUserId"),
					  type: RongIMLib.CONVERSATION_TYPE.PRIVATE
					});
					conversation.send({
					  messageType: RongIMLib.MESSAGE_TYPE.IMAGE, // 'RC:ImgMsg'
					  content: {
					    content: Url, // 压缩后的 base64 略缩图, 用来快速展示图片
					    imageUri: Url, // 上传到服务器的 url. 用来展示高清图片
						type: 'imgMsg',
						senduser: {
							id: localStorage.IMCOEDID,
							name: _this.data.realName,
							portraitUri: _this.data.headPicture || 'http://jlm-file.oss-cn-hangzhou.aliyuncs.com/jlm-product/image/portrait/2020/11/9472ab92fe90400fbee424c2d6b02fb0.png'
						},
						receive:{
							id:getUrlParam("toUserId"),
							name:decodeURI(getUrlParam("name")),
							portraitUri:getUrlParam("headPicture")
						},
						senderUserId:localStorage.IMCOEDID
					  },
					  canIncludeExpansion: true, // 是否携带扩展
					  expansion: {  // 携带的扩展内容
					    isRead: false
					  }
					}).then(function(message){
						_this.messageList.push(message);
						_this.images.push(message.content.imageUri);
						_this.scrollBottom()
						console.log('发送图片消息成功', message);
						resolve(message);
					});
				})
				return promise
			},
			scrollBottom(){
				var container = this.$el.querySelector('.box');
				this.$el.querySelector('.box').scrollTop = container.scrollHeight + 100
			},
			sendmessageBtn(){
				const _this = this;
				_this.sendmessage().then(()=>{_this.scrollBottom()})
			},
			sendmessage(){
				return new Promise((resolve,reject)=>{
					const _this = this;
					if(!_this.message){
						uni.showToast({title: '不能发送空内容',icon:'none'})
						reject()
						return;
					}
					var conversation = _this.$im.Conversation.get({
					  targetId:  getUrlParam("toUserId"),
					  type: RongIMLib.CONVERSATION_TYPE.PRIVATE
					});
					
					conversation.send({
					  messageType: RongIMLib.MESSAGE_TYPE.TEXT, // 'RC:TxtMsg'
					  content: { // 填写开发者定义的消息内容
					    content: _this.message, // 文本内容
					    senduser: {
					    	id: localStorage.IMCOEDID,
					    	name: _this.data.realName,
					    	portraitUri: _this.data.headPicture || 'http://jlm-file.oss-cn-hangzhou.aliyuncs.com/jlm-product/image/portrait/2020/11/9472ab92fe90400fbee424c2d6b02fb0.png'
					    },
					    receive:{
					    	id: getUrlParam("toUserId"),
					    	name: decodeURI(getUrlParam("name")),
					    	portraitUri: getUrlParam("headPicture") 
					    },
					    senderUserId:localStorage.IMCOEDID
					  },
					  canIncludeExpansion: true, // 是否携带扩展
					  expansion: {  // 携带的扩展内容
					    isRead: false
					  }
					}).then((message) => {
					  console.log('发送携带扩展的文字消息成功', message);
					  _this.messageList.push(message)
					  _this.message = ''
					  resolve(message)
					}).catch((error) => {
					  console.log('发送携带扩展的文字消息失败', error);
					});
				})
			},
			getMessage(date){
				uni.showLoading({
					title:'加载中...'
				})
				return new Promise((resolve,reject)=>{
					const _this = this;
					var conversation = _this.$im.Conversation.get({
					  targetId: getUrlParam("toUserId"),
					  type: RongIMLib.CONVERSATION_TYPE.PRIVATE
					});
					const NEWDATE = +new Date();
					var option = {
						timestrap: date?date:NEWDATE,
					    order: 0,
						count: 5
					};
					conversation.getMessages(option).then(function(result){
					  var list = result.list; // 历史消息列表
					 //  let timeNum = -1
					 //  var time = setInterval(()=>{
						// timeNum++
						// if(timeNum >= list.length){
						// 	clearInterval(time)
						// 	return false;
						// }
						// if(list[timeNum].senderUserId == localStorage.IMCOEDID){
						// 	return;
						// }
						// //发送已读start
						// var conversation = _this.$im.Conversation.get({
						// 	targetId: list[timeNum].targetId,
						// 	type: RongIMLib.CONVERSATION_TYPE.PRIVATE
						// });
						// var messageUId = list[timeNum].messageUId;  // 消息唯一 Id, message 中的 messageUid
						// var lastMessageSendTime = list[timeNum].sentTime;  // 最后一条消息的发送时间
						// var type = '1';  // 备用，默认赋值 1 即可
						// // 以上 3 个属性在会话的最后一条消息中可以获得
						// conversation.send({
						// 	messageType: 'RC:ReadNtf',
						// 	content: {
						// 		messageUId: messageUId,
						// 		lastMessageSendTime: lastMessageSendTime,
						// 		type: type
						// 	}
						// }).then(function(message){
						// 	console.log('发送已读通知消息成功', message);
						// });
						// //发送已读end
					 //  },500)
					  var hasMore = result.hasMore; // 是否还有历史消息可以获取
					  _this.messageList = list.concat(_this.messageList);
					  uni.stopPullDownRefresh()
					  uni.hideLoading()
					  var conversation = _this.$im.Conversation.get({
					    targetId: getUrlParam("toUserId"),
					    type: RongIMLib.CONVERSATION_TYPE.PRIVATE
					  });
					  conversation.read().then(function(){
					    console.log('清除未读数成功'); // im.watch conversation 将被触发
					  });
					  resolve(list);
					  list.forEach((a)=>{
                            if(a.content.imageUri){
                                _this.images.push(a.content.imageUri)
                            }
                        })
					  console.log('获取历史消息成功', list, hasMore);
					});
				})
			},
			onInput(e) {
				if(e.detail.value != '') {
					this.messageNone = true
				}else {
					this.messageNone = false
				}
			},
			inputContent(e) {
				if(e.target.lineCount >= 5) {
					this.wordWrap = false;
				}
			},
			changeImage() {
				this.showImage = !this.showImage
			},
			// 点击头像进入会员详情
			toUserInfo(item) {
				if(item.content.senduser.id.substr(0,3) == 'Hlh'){
					return;
				}
				this.$api.decode({code:item.content.senduser.id.substr(4)}).then((res)=>{
					uni.navigateTo({
						url:'/pages/member/memberDetail?id='+res.data.message
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	*{   
		-webkit-touch-callout:none;  /*系统默认菜单被禁用*/   
		-webkit-user-select:none; /*webkit浏览器*/   
		-khtml-user-select:none; /*早期浏览器*/   
		-moz-user-select:none;/*火狐*/   
		-ms-user-select:none; /*IE10*/   
		user-select:none;   
	}
	.chat {
		height: calc(100vh - 78upx);
		display: flex;
		flex-flow: column;
		background: #FFFFFF;
		view{
			overflow: hidden;
		}
		.box {
			padding: 21upx 24upx 0;
			// width: 702upx;
			overflow-y: auto;
			flex:1;
			padding-bottom: 100upx;
		}
		.voice-icon{
			display: inline-block;
			width: 40upx !important;
			margin: 0 !important;
			vertical-align: -10upx;
		}
		.left{
			display: flex;
			margin-top: 26upx;
			width: 100%;
			align-items: flex-end;
			view{
				width: 100%;
				display: flex;
				image{
					width: 200upx;
					height: auto;
					margin:0 46upx 0 26upx;
				}
				image.tx {
					margin: 0;
					width: 62upx;
					height: 62upx;
					display: block;
				}
			}
			.message {
				margin:0 44upx 0 20upx;
				padding:10upx 20upx;
				background-color: #F7F7F7;
				color: #333333;
				font-size: 24upx;
				position: relative;
				border-radius: 4upx;
				display: flex;
				align-items: center;
				max-width: 466upx;
				min-width:80upx;
				white-space:normal; word-break:break-all;
			}
			.message::before {
				content: '';
				position: absolute;
				width: 0;
				height: 0;
				left: -26upx;
				top: 17upx;
				border: 14upx solid;
				border-color: transparent #F7F7F7 transparent transparent;
			}
		}
		.right {
			float: right;
			margin-top: 26upx;
			width: 100%;
			view{
				display: flex;
				flex-flow: row-reverse;
				width: 100%;
				    align-items: flex-end;
				image{
					width: 200upx;
					height: auto;
					margin:0 46upx 0 26upx;
				}
				image.tx {
					width: 62upx;
					height: 62upx;
					display: block;
					margin: 0;
					float: right;
				}
			}
			.status{
				font-size: 26upx;
				color: #ccc;
			}
			.message {
				float: right;
				margin:0 44upx 0 20upx;
				padding:10upx 20upx;
				background-color: #3CBE8A;
				color: #FFFFFF;
				font-size: 24upx;
				position: relative;
				border-radius: 4upx;
				display: flex;
				align-items: center;
				max-width: 466upx;
				min-width:80upx;
				white-space:normal; word-break:break-all;
			}
			.message::before {
				content: '';
				position: absolute;
				width: 0;
				height: 0;
				right: -26upx;
				top: 17upx;
				border: 14upx solid;
				border-color: transparent transparent transparent #3CBE8A;
			}
		}
		.footer {
			width: 750upx;
			background-color: #F6F6F6;
			.content {
				width: 750upx;
				box-sizing: border-box;
				padding:31upx 30upx;
				display: flex;
				align-items: center;
				image {
					width: 42upx;
					height: 42upx;
				}
				.voiceBtn{
					display: block;
					background-color: #FFFFFF;
					min-height: 40upx;
					margin: 0 37upx;
					flex: 1;
					border-radius: 6upx;
					padding:20upx 10upx;
					font-size: 26upx;
					max-height: 190upx;
					text-align: center;
					-webkit-touch-callout:none;
					-webkit-user-select:none;
					-khtml-user-select:none;
					-moz-user-select:none;
					-ms-user-select:none;
					user-select:none;
					&.on{
						background: #ccc;color: #fff;
					}
				}
				textarea {
					display: block;
					background-color: #FFFFFF;
					min-height: 40upx;
					margin: 0 37upx;
					flex: 1;
					border-radius: 6upx;
					padding:20upx 10upx;
					font-size: 26upx;
					max-height: 190upx;
				}
				text {
					background-color: #3CBE8A;
					padding: 8upx 16upx;
					color: #FFFFFF;
					font-size: 26upx;
					border-radius: 4upx;
					margin-left: 20upx;
				}
			}
			.function {
				.imgbox{
					position: relative;
					width: 124upx;
					height: 124upx;
					margin-right: 50upx;
					.input{
						position: absolute;
						opacity: 0;
						top:0;
						left: 0;
						width: 124upx;
						height: 124upx;
						z-index: 10;
						overflow: hidden;
						input{
							width: 124upx;
						}
					}
				}
				display: flex;
				padding: 45upx 0 58upx;
				background-color: #F6F6F6;
				margin: 0 52upx;	
				image {
					width: 124upx;
					height: 124upx;
					margin-right: 51upx;
				}
				image:last-child {
					margin-right: 0;
				}
			}
		}
	}
	uni-textarea {
		height: 0;
	}
	.voice-loading{
		position: fixed;
		width: 320upx;
		height: 320upx;
		background: rgba(0, 0, 0, 0.7);
		top: 38vh;
		left: 215upx;
		border-radius: 20upx;
		display: flex;
		align-items: center;
		image{
			width: 250upx;
			display: block;
			margin: 0 auto;
		}
	}
</style>
